<template>
  <div>
    <el-table v-loading="loading" :data="list" style="width: 100%;" :max-height="tableHeight">
      <el-table-column width="600" label="发布内容" prop="text" fixed>
        <template slot-scope="scope">
          <el-popover placement="right" width="550" trigger="hover">
            <el-table v-loading="flowLoading" :data="hotFlowData">
              <el-table-column width="320" property="text" label="评论内容">
                <template slot-scope="scope">
                  <b v-html="scope.row.text" />
                  <p v-for="comment in scope.row.comments" v-html="'&nbsp;&nbsp;&nbsp;'+comment.text" />
                </template>
              </el-table-column>>
              <el-table-column width="80" property="like_count" label="点赞数" />
              <el-table-column width="150" property="user.screen_name" label="评论者昵称" />
            </el-table>
            <el-pagination
              v-if="max_id!==0"
              next-text="下一页"
              layout="prev, pager, next"
              @current-change="flowHandleCurrentChange"
            />
            <b slot="reference" @mouseenter="clickHotFlow(scope.row.id)" v-html="scope.row.text" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="发布图片" header-align="center" width="400">
        <template slot-scope="scope">
          <!--图片查看插件嵌套element的轮播图组件-->
          <viewer>
            <el-carousel v-if="scope.row.pic_num>0" :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="(item,index) in scope.row.pics" :key="index">
                <img :src="item.large.url" referrerpolicy="no-referrer">
              </el-carousel-item>
            </el-carousel>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column label="发布者">
        <template slot-scope="scope">
          <img v-if="scope.row.user.profile_image_url" :src="scope.row.user.profile_image_url" width="50" height="50">
          <br>{{ scope.row.user.screen_name }}
        </template>
      </el-table-column>
      <el-table-column label="发布尾巴" with="300" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-html="scope.row.source" />
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="created_at">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ new Date(scope.row.created_at) | timeFilter }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { home, hotFlow } from '@/api/weibo'
import { parseTime } from '@/utils'

export default {
  name: 'WeiboHome',
  components: {},
  filters: {
    timeFilter(time) {
      return parseTime(time)
    },
    imageFilter(image) {
      return image.replace('https', 'https://images.weserv.nl/?url=https')
    }
  },
  data() {
    return {
      query: {
        page: 1
      },
      total: 0,
      loading: true,
      flowLoading: true,
      list: [],
      hotFlowData: [],
      id: '',
      max_id: '',
      tableHeight: document.documentElement.clientHeight - 100
    }
  },
  mounted() {
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  created() {
    // 将参数拷贝进查询对象
    const query = this.$route.query
    this.query = Object.assign(this.query, query)
    this.query.limit = parseInt(this.query.limit)
    this.getList()
  },
  methods: {
    onReset() {
      this.$router.push({
        path: ''
      })
      this.query = {
        site_id: '',
        page: 1
      }
      this.getList()
    },
    onSubmit() {
      this.$router.push({
        path: '',
        query: this.query
      })
      this.getList()
    },
    handleCurrentChange(val) {
      this.loading = true
      Object.assign(this.$data, this.$options.data.call(this)) // 重置回最开始data里return定义的初始值
      this.query.page = val
      this.getList()
    },
    getList() {
      home(this.query)
        .then(response => {
          this.loading = false
          if (response.code === 0) {
            const { result } = response
            const list = result.data.cards.filter((elem, index) => index !== 0) || [] // 去掉第一个索引值
            list.map(item => {
              if (item.mblog) {
                this.list.push(item.mblog)
              }
            })
            this.total = result.data.cards.length || 0
          } else {
            this.$message.error('获取失败')
          }
        })
        .catch(() => {
          this.loading = false
          this.list = []
        })
    },
    clickHotFlow(id) {
      this.hotFlow(id)
    },
    hotFlow(id, max_id) {
      this.id = id
      hotFlow({ id, max_id }).then(res => {
        if (res.code === 0) {
          this.flowLoading = false
          this.hotFlowData = res.result.data && res.result.data.data
          this.max_id = res.result.data && res.result.data.max_id
        }
      })
    },
    // 分页
    flowHandleCurrentChange() {
      const id = this.id
      const max_id = this.max_id
      this.hotFlow(id, max_id)
    }
  }
}
</script>

<style type="text/scss" lang="scss">
</style>
